<template>
  <div>
    <el-container>
      <el-header>
        <p>查询</p>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="搜索：">
            <el-input v-model="formInline.orderId" placeholder="请输入要查询的订单号" icon="el-icon-search"></el-input>
          </el-form-item>
          <el-form-item label="下单方式：">
            <el-select v-model="formInline.orderWay" placeholder="请选择下单方式">
              <el-option label="小程序" value="xiaochengxu"></el-option>
              <el-option label="门店" value="mendian"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
      </el-header>
      <el-main>
        <!-- 表格 -->
        <el-table :data="tableData" stripe style="width: 100%" :cell-style="{border:'1px solid #DCDCDC'}" :header-cell-style="{background:'#F0F0F0',border:'1px solid #DCDCDC',color:'#000000'}">
          <el-table-column prop="order_id" label="ID" width="50" align='center'></el-table-column>
          <el-table-column prop="order_num" label="订单编号" width="120" align='center'></el-table-column>
          <el-table-column prop="customer_name" label="用户名" width="100" align='center'></el-table-column>
          <el-table-column prop="orderWay" label="下单方式" width="100" align='center'></el-table-column>
          <el-table-column prop="order_time" label="用餐时间" width="120" align='center'></el-table-column>
          <el-table-column prop="customer_type" label="用户类别" width="120" align='center'></el-table-column>
          <el-table-column prop="cash_money" label="消费金额" width="80" align='center'></el-table-column>
          <el-table-column prop="pay_way" label="支付方式" width="120" align='center'></el-table-column>
          <el-table-column prop="table_num" label="就餐桌号" width="80" align='center'></el-table-column>
          <el-table-column prop="order_state" label="状态" width="100" align='center'></el-table-column>
          <el-table-column fixed="right" label="操作" align='center'>
            <template slot-scope="scope">
              <el-button @click="onCheck(scope.row)" type="text" size="small">查看订单</el-button>
              <el-button @click="onDel(scope.row)" type="text" size="small">删除</el-button>
              <el-button @click="onTran(scope.row)" type="text" size="small">反位</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 页码 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" 
        :page-sizes="[5,10,15,20,25,30]" :page-size="count" layout="total,sizes,prev, pager, next, jumper" :total="totalData.length">
        </el-pagination>
      </el-main>
    </el-container>
  </div>
</template>
<style scoped lang='less'>
* {
  box-sizing: border-box;
}
.el-header {
  border: 1px solid #dcdcdc;
  height: 100px !important;
  padding: 15px 30px;
  .el-form {
    margin-left: 50px;
    .el-form-item {
      margin-right: 60px;
      .el-input,
      .el-select {
        width: 260px;
      }
      .el-button {
        width: 150px;
      }
    }
  }
}
.el-main {
  margin-top: 15px;
  border: 1px solid #dcdcdc;
  padding: 18px 10px 20px 10px;
}
.el-table {
  margin-bottom: 50px;
}
.el-pagination {
  text-align: center;
}
</style>
<script>
export default {
  data() {
    return {
      // 搜索框数据
      formInline: {
        tableId: '',
        orderWay: ''
      },
      // 订单总数据
      totalData:[],
      // 中间数组
      centerData:[],
      // 页码
      page:1,
      // 条数
      count:5
    }
  },
  methods: {
    // 查询
    onSubmit() {

    },
    // 查看详情
    onCheck() {

    },
    // 删除
    onDel(data){
        this.$alert('你确定要删除吗？',{
            title:'删除订单',
            callback: ()=> {
                this.$axios({
                    url:'/yl/historyorder/delhistoryorder',
                    method:'post',
                    data:{order_id:data.order_id}
                }).then(()=>{
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getHistoryorder()
                    this.page=1
                })
            }
        });
    },
    // 反位
    onTran() { 

    },
    // 每页多少条数据
    handleSizeChange(count) {
        this.count=count
    },
    // 分页
    handleCurrentChange(page) {
        this.page=page
    },
    // 获取所有数据
    getHistoryorder(){
        this.$axios({
            url:'/yl/historyorder/gethistoryorder'
        }).then((res)=>{
            this.totalData=res.data.data
        })
    }
  },
  // 创建后
  created(){
      this.getHistoryorder();
  },
  // 计算
  computed: {
      // 每页数据
      tableData:function(){
          return this.totalData.slice((this.page-1)*this.count,this.page*this.count)
      }
  }
}
</script>